<template>
  <cube-slide ref="slide" :data="bannerData" :interval="3000" :options="options" style="min-height: 80px;">
    <cube-slide-item
      v-for="(item, index) in bannerData"
      :key="index"
    >
      <template v-if="item.advLoadType == 1">
        <router-link tag="a" :to="item.advUrl" v-if="item.canInSite == 1" :target="item.target">
          <img :src="item.imgUrl" style="width: 100%; height: auto;"/>
        </router-link>
        <a :target="item.target" :href="item.advUrl" v-else>
          <img :src="item.imgUrl" style="width: 100%; height: auto;"/>
        </a>
      </template>
      <template v-else-if="item.advLoadType == 2">
        <remote-js :jsUrl="item.advUrl" ></remote-js>
      </template>
      
    </cube-slide-item>

    <template slot="dots" slot-scope="props">
      <span
        class="my-dot"
        :class="{active: props.current === index}"
        v-for="(item, index) in props.dots"
        :key="index"
      >{{index + 1}}</span>
    </template>
  </cube-slide>
</template>

<script>
import {getAdvertiseAllList} from 'api/AdvertiseApi'

import RemoteJs from 'components/RemoteJs'

export default {
  components: {
    RemoteJs
  },
  props: {
    dataKey: String
  },
  data() {
    return {
      options: {
        stopPropagation: true
      },
      bannerData: []
    };
  },
  methods: {
    getAdvertiseAllList () {
      getAdvertiseAllList({
        dataKey: this.dataKey
      }).then(res => {
        if(res.meta.success) {
          this.bannerData = res.data;
        }
      })
    }
  },
  created () {
    this.getAdvertiseAllList()
  }
};
</script>

<style lang="stylus" scoped>
@import '~assets/css/style.styl';

/ >>> .cube-slide-dots {
    bottom 8px
    text-align right
    .my-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 5px;
        &.active {
            background: $colorPrimary !important;
        }
    }
}



</style>
